{% extends "enterprise/base.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/images/skin/minimal/blue.css">
    <link rel="stylesheet" type="text/css" href="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/js/dojo/dijit/themes/claro/claro.css">
{% endblock %}

{% block content %}
<script type="text/javascript">
    var primary_menu = "menu_2";
    var sub_menu = "menu_2_0";
</script>

    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h3>地理位置</h3>
                </div>
                <!-- <div class="panel-title">
                    <label >企业地图中心点经度</label>
                        <input name="geo_x" id="geo_x" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div>
                <div class="panel-title">
                    <label >企业地图中心点纬度</label>
                    <input name="geo_x" id="geo_y" style="margin-top: 10px;padding: 0px; height: 22px;width: 150px" type="text" class="form-control">
                </div> -->

                <div class="panel-options">
                <a href="/basic/mapEdit/" class="bg"><button type="button" class="btn btn-info">编辑企业边界</button></a>
                </div>
            </div>


            <div class="panel-body" style="padding: 0px">
                <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">
                    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">
                        <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                    </div>
                </div>
                <div class="mapEdit">
                    <div class="panel panel-primary panel-collapse">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h4 class="heading">企业地图展示</h4>
                            </div>
                            <div class="panel-options" style="margin:4px 0px;">
                                <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <!-- panel body -->
                        <div class="panel-body">
                            <div class="">
                                <span>选择要展示的信息</span>
                            </div>
                            <hr/>
                            <div class="">
                                <ul>
                                    <li>
                                        <input data='production' checked type="checkbox">
                                        <span>生产区</span>    <!--接着上一行-->
                                    </li>
                                    <li>
                                        <input data='storage' checked type="checkbox">
                                        <span>贮罐区</span>    <!--接着上一行-->
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary panel-collapse">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <h4 class="heading">企业地图展示</h4>
                            </div>
                            <div class="panel-options" style="margin:4px 0px;">
                                <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            </div>
                        </div>
                        <!-- panel body -->
                        <div class="panel-body">
                            <!-- <div class="">
                                    点击<label class="btn btn-white"><img width="12px" height="12px" src="/static/images/boundary.png"></label>绘制,双击鼠标结束绘制
                                </div>
                                <hr/> -->
                            <form method="post" action="">
                                <div class="clearfix">
                                    <label>存储方式</label>
                                    <select class="form-control" id="areaType">
                                        <option value="生产区">生产区</option>
                                        <option value="贮罐区">贮罐区</option>
                                    </select>
                                </div>
                                
                                <div id="toolbar" style="padding-left: 0px;padding-top:10px;padding-right: 0px;">
                                    <div class="btn-group toolbar" >
                                        <input type="hidden" value="{{ key }}" id="name" />
                                        <input type="hidden" value="" name="valuePolygon" id="valuePolygon" />
                                        <input type="hidden" value="" name="center" id="center" />
                                        <input type="hidden" value="" name="ids" id="ids" />
                                        <label style="margin-top:10px;float:left;margin-right:5px;">绘制范围</label>
                                        <label id="rangeStoreCell" class="btn btn-white">
                                            <img title="圈定{{ title }}范围" src="/static/images/boundary.png">
                                        </label>
                                        <label id="undo" class="btn btn-white" onclick="undoManager.undo()">
                                            <img src="/static/images/undo.png">
                                        </label>
                                        <label id="redo" class="btn btn-white" onclick="undoManager.redo();">
                                            <img src="/static/images/redo.png">
                                        </label>
                                    </div>
                                </div>
                                <div id="optionAreaDiv" class="">
                                    <hr>
                                    <!--查找数据 storage-->
                                    <div class="md">
                                        <input class="btn btn-info btn-block" type="button" value="提交"  onClick="submitRange();"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    </div>
            </div>
            <div id='_mapData' style='display:none;'>{{ mapData }}</div> <!--显示地图数据-->
            <div class="" id='mapPopHideArea' style="display:none">
                <table class="table table-bordered">
                    <thead>
                        <tr id='_headTr'>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

<script type="text/javascript">
    var e_points = eval('{{ e.points }}');
    var e_center_points = eval('{{ e.centerPoint }}');

    var p_points = eval('{{ p.points }}');
    var p_center_points = eval('{{ p.centerPoint }}');
    var p_extent = '{{ p.extent | safe }}';

    if(p_extent){
        p_extent = JSON.parse(p_extent);
    }

</script>
<script type="text/javascript" src="/static/js/icheck.js"></script><!--选择条目 j-->
<script type="text/javascript" src="/static/js/toastr.js"></script>
<script type="text/javascript" src="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/init.js"></script>
<script type="text/javascript" src="/static/js/map.action.company.js"></script>

<script language="javascript">
    $(function(){
        $("#rangeStoreCell").bind('click',function(){
            var name = $('#name').val();       //'store'
            drowPolygon(name);
        });
        $('input[type = checkbox]').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('input[type=checkbox]').bind('ifClicked',function(event){
            
            var _flag = this.checked;
            var _dataKey = this.getAttribute('data'); 
            var _graphics = mymap.graphics.graphics;
            for(var i=0; i<_graphics.length; i++){
                var _itemGraph = _graphics[i];
                if(_itemGraph.attributes){
                    if( _itemGraph.attributes.name == _dataKey){
                        
                        if(_flag){
                            _itemGraph.hide();
                        }else{
                            _itemGraph.show();
                        }
                    }
                }
            }
        })
    })
    function getNextElement (field) {
        var form = field.form;
        for (var e = 0; e < form.elements.length; e++)
            if (field == form.elements[e])
                break;

        return form.elements[++e % form.elements.length];
    }
    function tabOnEnter (field, evt) {
        var keyCode = document.layers ? evt.which : document.all ?
                evt.keyCode : evt.keyCode;
        if (field.value.length == 1){
            getNextElement(field).focus();
            return false;
        }
    }
    function submitRange(){ //提交
        //这里要做一个判断，如果没有画就不提交
        var doList = $('#valuePolygon').val();
        var title="添加数据";
        var type=$("#areaType").val();
        toSubmitModal(title,type);
    }

    function toSubmitModal(title,type){     // storeCell  storage的内容    开始赋值呈现
        $('#rangeModal').modal({show:true});
        $("#rangeModal #title").empty().append(title);
        $("#s_type").val(type)
        $("#rangeModal #submit").die().bind('click',function(){
            return submitData();           
        });
    }

    function submitData(){
        var type = $('#s_type').val();
        if(type == '生产区'){
            type = '1';
        }else if(type == '贮罐区'){
            type = '2';
        }else{
            type = '';
        }

        var data = {
            name : $('#s_name').val(),
            desc : $('#s_desc').val(),
            type : type,
            points : $('#valuePolygon').val(),
            center : $('#center').val()
        }

        $.ajax({
            data:data,
            type:'POST',
            dataType:'json',
            error:function(error){
                console.log(error);
            },
            success:function(data){
                if(data.success){
                    alert(data.success);
                    window.location.reload();
                }
                if(data.error){
                    alert(data.error);
                }
            }
        })

        return false;
    }

</script>
<div class="modal fade in" id="rangeModal" aria-hidden="false">
    <div class="modal-dialog showLoad">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="title"></h3>
            </div>
            <div class="modal-body" id="content">
                <form method="post" action="" enctype="multipart/form-data" class="form-horizontal form-groups-bordered">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类型</label>
                        <input class="form-control" id="s_type" type="text" readonly="readonly">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称</label>
                        <input class="form-control" id="s_name" type="text">
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">描述</label>
                        <input class="form-control" id="s_desc" type="text">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal" id="submit">提交</button>
                <button type="button" class="btn btn-white" data-dismiss="modal"  onclick="undoManager.undo();">撤销编辑</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}